<template>
    <view class="warring-wrap">
        <u-notify ref="uNotify" :safeAreaInsetTop=true fontSize="30" icon="photo"></u-notify>
        <view class="warring" v-if="this.callShow">
            <view class="btns-wrap"><u-button type="error" text="直接呼叫" class="custom-style"
                    @click="changeBtns()"></u-button>
            </view>
            <view class="btns-wrap" @touchstart="startPress(0)" @touchend="endPress" @touchcancel="endPress"><u-button
                    type="error" text="电话呼叫" class="custom-style" @click="showNotify"></u-button></view>
        </view>
        <view class="warring" v-if="!this.callShow">
            <view class="btns-wrap" @touchstart="startPress(1)" @touchend="endPress" @touchcancel="endPress"><u-button
                    type="error" text="语音通话" class="custom-style" @click="showNotify"></u-button></view>
            <view class="btns-wrap" @touchstart="startPress(2)" @touchend="endPress" @touchcancel="endPress"><u-button
                    type="error" text="视频通话" class="custom-style" @click="showNotify"></u-button></view>
        </view>
        <view v-if="LineProgressShow" class="warringLineProgress">
            <u-line-progress :showText=false :percentage="percentage" activeColor="#ff897b" height="20"
                inactiveColor="#fde7d8"></u-line-progress>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            callShow: true,
            percentage: 0,
            LineProgressShow: false,
            show: true
        }
    },
    methods: {
        startPress(index) {
            this.LineProgressShow = true
            this.percentage = 10
            for (let i = 0; i < 10; i++) {
                this.timer = setTimeout(() => {
                    this.percentage += 10
                }, (300 * i));
            }
            this.timerEvent = setTimeout(() => {
                this.performLongPressFunction(index);
                this.LineProgressShow = false
                this.percentage = 0
            }, 3000);
        },
        endPress() {
            // 中断长按反馈
            clearTimeout(this.timerEvent);
            clearTimeout(this.timer);
            this.LineProgressShow = false
            this.percentage = 0
        },
        performLongPressFunction(index) {
            // 执行长按功能
            if (index == 0) {
                // 电话呼叫功能
                uni.makePhoneCall({
                    phoneNumber: '1234567890', // 需要拨打的电话号码
                    success() {
                        console.log('拨打电话成功！');
                    },
                    fail() {
                        console.log('拨打电话失败！');
                    }
                });
            } else if (index == 1) {
                this.$tab.navigateTo('/pages/voiceCall/index')
            }
            else if (index == 2) {
                this.$tab.navigateTo('/pages/videoCall/index')
            }
        },
        changeBtns() {
            this.callShow = false
        },
        showNotify() {
            this.$refs.uNotify.primary('请长按按钮3秒')
        }
    }
}
</script>

<style lang="scss">
.warring-wrap {
    height: 95vh;
    display: flex;
    align-items: center; // 垂直居中
    position: relative;

    .warring {
        height: 400rpx;
        width: 100%;
        position: absolute;
        display: flex;
        background-image: linear-gradient(#ffffff, #fde7d8);
        border-radius: 5%;
        overflow: hidden;
        box-shadow: 10px 10px 11px 4px #c0bdb1;

        .btns-wrap {
            margin-left: 11%;
        }

        .custom-style {
            height: 250rpx;
            width: 250rpx;
            border-radius: 50%;
            overflow: hidden;
            background-image: linear-gradient(#ff897b, #777777);
            border: none;
            font-weight: 1000;
            box-shadow: 10px 10px 11px 4px #c0bdb1;
            top: 12%;

            .u-button__text {
                span {
                    font-size: 25px;
                }
            }

        }

    }

    .warringLineProgress {
        padding: 0 10%;
        position: absolute;
        width: 100%;
        top: 60%;
    }



}
</style>